<template>
  <div class="title-test-container">
    <el-card class="test-card" header="🎯 标题生成测试工具">
      <el-row :gutter="20">
        <!-- 左侧：模板输入 -->
        <el-col :span="12">
          <div class="form-group">
            <label class="form-label">标题模板</label>
            <textarea
              v-model="testTemplate"
              class="form-textarea"
              rows="4"
              placeholder="请输入标题模板，如：【🦑最新情报】竞彩串关推荐：主队 VS 客队+主队 VS 客队 + 主队 VS 客队 数据情况解析！"
            />
          </div>
        </el-col>

        <!-- 右侧：赛事信息 -->
        <el-col :span="12">
          <div class="form-group">
            <label class="form-label">赛事信息</label>
            <div class="match-list">
              <div
                v-for="(match, index) in testMatchList"
                :key="index"
                class="match-item"
              >
                <input
                  v-model="match.home_team_name"
                  placeholder="主队名称"
                  class="team-input"
                >
                <span class="vs-text">VS</span>
                <input
                  v-model="match.away_team_name"
                  placeholder="客队名称"
                  class="team-input"
                >
                <select v-model="match.match_lx" class="match-type-select">
                  <option value="1">足球</option>
                  <option value="2">篮球</option>
                </select>
                <button
                  class="delete-btn"
                  @click="removeTestMatch(index)"
                >
                  删除
                </button>
              </div>
              <button
                class="add-btn"
                @click="addTestMatch"
              >
                + 添加赛事
              </button>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 专家ID测试 -->
      <div class="expert-section">
        <h4>🔮 专家标题生成测试</h4>
        <div class="expert-input-group">
          <input
            v-model="expertId"
            placeholder="请输入专家ID"
            class="expert-input"
          >
          <select v-model="lotLx" class="lot-lx-select">
            <option value="1">预测分类1 (title)</option>
            <option value="2">预测分类2 (title1)</option>
            <option value="3">预测分类3 (title2)</option>
          </select>
          <button
            class="btn btn-primary"
            :disabled="loadingExpert || !expertId"
            @click="testExpertTitleGeneration"
          >
            {{ loadingExpert ? '🔄 获取中...' : '🎯 生成专家标题' }}
          </button>
        </div>
        <div v-if="expertInfo" class="expert-info">
          <p><strong>专家名称：</strong>{{ expertInfo.nickname || '未知' }}</p>
          <p><strong>当前模板：</strong>
            <span v-if="lotLx === 1">{{ expertInfo.title || '无模板' }}</span>
            <span v-else-if="lotLx === 2">{{ expertInfo.title1 || '无模板' }}</span>
            <span v-else-if="lotLx === 3">{{ expertInfo.title2 || '无模板' }}</span>
          </p>
          <p><strong>预测分类：</strong>{{ lotLx }}</p>
        </div>
      </div>

      <!-- 操作按钮 -->
      <div class="button-group">
        <button class="btn btn-success" @click="testTitleGeneration">
          🎯 生成标题
        </button>
        <button class="btn btn-info" @click="resetTestData">
          🔄 重置数据
        </button>
        <button class="btn btn-warning" @click="debugTestData">
          🔍 调试数据
        </button>
      </div>

      <!-- 生成结果 -->
      <div v-if="generatedTitle" class="result-section">
        <div class="result-alert">
          <h4>生成的标题：</h4>
          <p class="result-text">{{ generatedTitle }}</p>
        </div>
      </div>

      <!-- 测试示例 -->
      <div class="example-section">
        <h3>📝 测试示例</h3>
        <div class="example-item">
          <h4>示例1：三场比赛</h4>
          <p><strong>模板：</strong>【🦑最新情报】竞彩串关推荐：主队 VS 客队+主队 VS 客队 + 主队 VS 客队 数据情况解析！</p>
          <p><strong>结果：</strong>【🦑最新情报】竞彩串关推荐：皇家马德里 VS 巴塞罗那+曼城 VS 利物浦 + 拜仁慕尼黑 VS 多特蒙德 数据情况解析！</p>
        </div>

        <div class="example-item">
          <h4>示例2：两场比赛</h4>
          <p><strong>模板：</strong>【🦑最新情报】竞彩串关推荐：主队 VS 客队+主队 VS 客队 + 主队 VS 客队 数据情况解析！</p>
          <p><strong>结果：</strong>【🦑最新情报】竞彩串关推荐：皇家马德里 VS 巴塞罗那+曼城 VS 利物浦 数据情况解析！</p>
        </div>

        <div class="example-item">
          <h4>示例3：单场比赛（串关变单关）</h4>
          <p><strong>模板：</strong>【🦑最新情报】竞彩串关推荐：主队 VS 客队+主队 VS 客队 + 主队 VS 客队 数据情况解析！</p>
          <p><strong>结果：</strong>【🦑最新情报】竞彩单关推荐：皇家马德里 VS 巴塞罗那 数据情况解析！</p>
          <p><em>注意：根据比赛数量自动调整标题格式，去掉多余的占位符</em></p>
        </div>

        <div class="example-item">
          <h4>示例5：比赛类型术语替换</h4>
          <p><strong>功能：</strong>根据比赛类型自动替换术语、运动类型和emoji</p>
          <p><strong>规则：</strong></p>
          <ul>
            <li><strong>足球 (match_lx=1)：</strong></li>
            <ul>
              <li>大小分 → 大小球</li>
              <li>让分 → 让球</li>
              <li>篮球 → 足球</li>
              <li>🏀 → ⚽️</li>
            </ul>
            <li><strong>篮球 (match_lx=2)：</strong></li>
            <ul>
              <li>大小球 → 大小分</li>
              <li>让球 → 让分</li>
              <li>足球 → 篮球</li>
              <li>⚽️ → 🏀</li>
            </ul>
          </ul>
          <p><strong>测试方法：</strong></p>
          <ol>
            <li>在模板中输入包含术语、运动类型或emoji的文本</li>
            <li>选择不同的比赛类型（足球/篮球）</li>
            <li>点击"生成标题"查看替换效果</li>
          </ol>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { zhuanjiaInfo } from '../../../libs/api'

export default {
  name: 'TitleTest',
  data() {
    return {
      // 测试模板
      testTemplate: '【🦑最新情报】篮球串关推荐：主队 VS 客队+主队 VS 客队 + 主队 VS 客队 让分分析！🏀',

      // 测试赛事列表
      testMatchList: [
        { home_team_name: '皇家马德里', away_team_name: '巴塞罗那', match_lx: 1 },
        { home_team_name: '曼城', away_team_name: '利物浦', match_lx: 1 },
        { home_team_name: '拜仁慕尼黑', away_team_name: '多特蒙德', match_lx: 1 }
      ],

      // 生成的标题
      generatedTitle: '',

      // 专家信息
      expertInfo: null,
      expertId: '',
      loadingExpert: false,
      lotLx: 1 // 预测分类
    }
  },

  methods: {
    /**
     * 根据专家ID和赛事信息生成标题
     * @param {string} expertId - 专家ID
     * @param {Array} matchList - 赛事信息列表
     * @param {number} lotLx - 预测分类（1,2,3）
     * @returns {Promise<string>} 生成的标题
     */
    async generateTitleByExpert(expertId, matchList, lotLx = 1) {
      try {
        this.loadingExpert = true

        // 获取专家信息
        const res = await zhuanjiaInfo({ expert_id: expertId })
        const expertData = res.data

        if (!expertData) {
          throw new Error('专家信息不存在')
        }

        // 根据预测分类选择不同的标题模板
        let template = ''
        if (lotLx === 1) {
          template = expertData.title
        } else if (lotLx === 2) {
          template = expertData.title1
        } else if (lotLx === 3) {
          template = expertData.title2
        } else {
          template = expertData.title // 默认使用title
        }

        if (!template) {
          throw new Error(`专家信息中不存在对应的标题模板，lot_lx: ${lotLx}`)
        }

        // 使用选择的标题模板生成标题
        const generatedTitle = this.generateTitleFromTemplate(template, matchList)

        this.expertInfo = expertData
        return generatedTitle
      } catch (error) {
        console.error('获取专家信息失败:', error)
        this.$message({
          type: 'error',
          message: '获取专家信息失败: ' + error.message
        })
        return '获取专家信息失败'
      } finally {
        this.loadingExpert = false
      }
    },

    /**
     * 根据模板字符串和赛事信息生成标题
     * @param {string} template - 标题模板字符串
     * @param {Array} matchList - 赛事信息列表
     * @returns {string} 生成的标题
     */
    generateTitleFromTemplate(template, matchList) {
      if (!template || !matchList || matchList.length === 0) {
        return template || '暂无标题'
      }

      let result = template

      // 如果只有一场比赛，将"串关"替换为"单关"
      if (matchList.length === 1) {
        result = result.replace(/串关/g, '单关')
      }

      // 根据比赛类型替换术语
      const matchType = matchList[0]?.match_lx || 1 // 默认足球
      if (matchType === 1) {
        // 足球：大小球、让球
        result = result.replace(/大小分/g, '大小球')
        result = result.replace(/让分/g, '让球')
        // 足球：替换运动类型和emoji
        result = result.replace(/篮球/g, '足球')
        result = result.replace(/🏀/g, '⚽️')
      } else if (matchType === 2) {
        // 篮球：大小分、让分
        result = result.replace(/大小球/g, '大小分')
        result = result.replace(/让球/g, '让分')
        // 篮球：替换运动类型和emoji
        result = result.replace(/足球/g, '篮球')
        result = result.replace(/⚽️/g, '🏀')
      }

      // 替换主队 VS 客队的模式
      const vsPattern = /主队\s*VS\s*客队/g
      let matchIndex = 0
      const maxReplacements = matchList.length

      result = result.replace(vsPattern, () => {
        if (matchIndex < maxReplacements) {
          const match = matchList[matchIndex]
          matchIndex++
          return `${match.home_team_name} VS ${match.away_team_name}`
        }
        return '主队 VS 客队' // 如果赛事信息不够，保持原样
      })

      // 去掉多余的占位符，根据实际比赛数量
      if (matchList.length === 1) {
        // 单场比赛：去掉所有剩余的占位符
        result = result.replace(/(\+\s*主队\s*VS\s*客队\s*)+/g, '')
      } else if (matchList.length === 2) {
        // 两场比赛：去掉最后一个占位符
        result = result.replace(/\+\s*主队\s*VS\s*客队\s*$/, '')
        result = result.replace(/\+\s*主队\s*VS\s*客队\s*\+/, '+')
      }

      return result
    },

    /**
     * 智能生成标题 - 根据赛事数量自动选择模板
     * @param {Array} matchList - 赛事信息列表
     * @param {string} customTemplate - 自定义模板（可选）
     * @returns {string} 生成的标题
     */
    generateSmartTitle(matchList, customTemplate = null) {
      if (!matchList || matchList.length === 0) {
        return '暂无赛事'
      }

      // 如果没有自定义模板，使用默认模板
      if (!customTemplate) {
        const count = matchList.length
        if (count === 1) {
          customTemplate = '【🦑最新情报】竞彩单关推荐：主队 VS 客队 数据情况解析！'
        } else if (count === 2) {
          customTemplate = '【🦑最新情报】竞彩串关推荐：主队 VS 客队+主队 VS 客队 数据情况解析！'
        } else {
          customTemplate = '【🦑最新情报】竞彩串关推荐：主队 VS 客队+主队 VS 客队 + 主队 VS 客队 数据情况解析！'
        }
      }

      return this.generateTitleFromTemplate(customTemplate, matchList)
    },

    // 测试相关函数
    testTitleGeneration() {
      this.generatedTitle = this.generateTitleFromTemplate(this.testTemplate, this.testMatchList)
      this.$message({
        type: 'success',
        message: '标题生成成功！'
      })
    },

    async testExpertTitleGeneration() {
      if (!this.expertId) {
        this.$message({
          type: 'warning',
          message: '请输入专家ID！'
        })
        return
      }

      try {
        this.generatedTitle = await this.generateTitleByExpert(this.expertId, this.testMatchList, this.lotLx)
        this.$message({
          type: 'success',
          message: '专家标题生成成功！'
        })
      } catch (error) {
        console.error('专家标题生成失败:', error)
      }
    },

    addTestMatch() {
      this.testMatchList.push({
        home_team_name: '',
        away_team_name: '',
        match_lx: 1 // 默认足球
      })
    },

    removeTestMatch(index) {
      if (this.testMatchList.length > 1) {
        this.testMatchList.splice(index, 1)
      } else {
        this.$message({
          type: 'warning',
          message: '至少需要保留一场赛事！'
        })
      }
    },

    resetTestData() {
      this.testTemplate = '【🦑最新情报】竞彩串关推荐：主队 VS 客队+主队 VS 客队 + 主队 VS 客队 数据情况解析！'
      this.testMatchList = [
        { home_team_name: '皇家马德里', away_team_name: '巴塞罗那' },
        { home_team_name: '曼城', away_team_name: '利物浦' },
        { home_team_name: '拜仁慕尼黑', away_team_name: '多特蒙德' }
      ]
      this.generatedTitle = ''
      this.$message({
        type: 'info',
        message: '测试数据已重置！提示：删除两场比赛可以测试单关效果'
      })
    },

    debugTestData() {
      console.log('=== 调试信息 ===')
      console.log('测试模板:', this.testTemplate)
      console.log('测试赛事列表:', this.testMatchList)
      console.log('生成的标题:', this.generatedTitle)

      this.$message({
        type: 'info',
        message: `模板长度: ${this.testTemplate.length}, 赛事数量: ${this.testMatchList.length}`
      })
    }
  }
}
</script>

<style scoped>
.title-test-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.test-card {
  max-width: 1200px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: white;
  border-radius: 8px;
  padding: 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #303133;
  font-size: 14px;
}

.form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.2s;
}

.form-textarea:focus {
  outline: none;
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.match-list {
  max-height: 300px;
  overflow-y: auto;
}

.match-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border: 1px solid #e4e7ed;
}

.team-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.team-input:focus {
  outline: none;
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.match-type-select {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
  min-width: 80px;
  transition: border-color 0.2s;
}

.match-type-select:focus {
  outline: none;
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.vs-text {
  font-weight: bold;
  color: #606266;
  font-size: 14px;
  min-width: 30px;
  text-align: center;
}

.delete-btn {
  padding: 6px 12px;
  background-color: #f56c6c;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
  transition: background-color 0.2s;
}

.delete-btn:hover {
  background-color: #f78989;
}

.add-btn {
  padding: 8px 16px;
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  margin-top: 10px;
  transition: background-color 0.2s;
}

.add-btn:hover {
  background-color: #66b1ff;
}

.expert-section {
  background-color: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 6px;
  padding: 16px;
  margin: 20px 0;
  border-left: 4px solid #409EFF;
}

.expert-section h4 {
  margin: 0 0 12px 0;
  color: #409EFF;
  font-size: 16px;
}

.expert-input-group {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.expert-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.lot-lx-select {
  padding: 8px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
  min-width: 150px;
  transition: border-color 0.2s;
}

.lot-lx-select:focus {
  outline: none;
  border-color: #409EFF;
}

.expert-input:focus {
  outline: none;
  border-color: #409EFF;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.expert-info {
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 12px;
  margin-top: 10px;
}

.expert-info p {
  margin: 4px 0;
  font-size: 14px;
  color: #606266;
}

.expert-info strong {
  color: #303133;
}

.btn-primary {
  background-color: #409EFF;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background-color: #66b1ff;
}

.btn-primary:disabled {
  background-color: #c0c4cc;
  cursor: not-allowed;
}

.button-group {
  text-align: center;
  margin: 20px 0;
}

.btn {
  padding: 10px 20px;
  margin: 0 8px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s;
}

.btn-success {
  background-color: #67c23a;
  color: white;
}

.btn-success:hover {
  background-color: #85ce61;
}

.btn-info {
  background-color: #909399;
  color: white;
}

.btn-info:hover {
  background-color: #a6a9ad;
}

.btn-warning {
  background-color: #e6a23c;
  color: white;
}

.btn-warning:hover {
  background-color: #ebb563;
}

.result-section {
  margin: 20px 0;
}

.result-alert {
  background-color: #f0f9ff;
  border: 1px solid #b3d8ff;
  border-radius: 6px;
  padding: 16px;
  border-left: 4px solid #409EFF;
}

.result-alert h4 {
  margin: 0 0 8px 0;
  color: #409EFF;
  font-size: 16px;
}

.result-text {
  margin: 0;
  color: #303133;
  font-size: 14px;
  line-height: 1.6;
  word-break: break-all;
}

.example-section {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 6px;
  border-left: 4px solid #409EFF;
  margin-top: 30px;
}

.example-section h3 {
  margin: 0 0 15px 0;
  color: #409EFF;
  font-size: 18px;
}

.example-item {
  margin-bottom: 20px;
}

.example-item h4 {
  color: #409EFF;
  margin: 10px 0 8px 0;
  font-size: 16px;
}

.example-item p {
  margin: 5px 0;
  line-height: 1.6;
  color: #606266;
}

.example-item strong {
  color: #303133;
}
</style>
